import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Layout, Input, Button } from 'tea-component';
import { NewestBlockInfo } from '@src/components/Newest-block-info';
import { DataCard } from '@src/components/common-compinents';
import { TransactionStatistics } from '@src/components/Transaction-statistics';
import * as actionTypes from '@src/model/actionType';
import { numToFormat, computeDay } from '@src/utils/index';
import { useHistory } from 'react-router-dom';
import { get as _get } from 'lodash';
import { ChainList } from './ChainList';
import { ContractList } from './ContractList';

// @ts-ignore
import earth from '@src/assets/img/earth.png';
// @ts-ignore
import tradeCount from '@src/assets/img/trade-count.png';
// @ts-ignore
import RunDate from '@src/assets/img/run-date.png';
// @ts-ignore
import ChildrenChain from '@src/assets/img/children-chain.png';
// @ts-ignore
import NodeCount from '@src/assets/img/node-count.png';

const { Content } = Layout;

export function HomeAll(props) {
  const history = useHistory();
  // @ts-ignore
  const homeStore = useSelector((state) => state.homeReducer);
  const dispatch = useDispatch();
  const runningTime = _get(homeStore, ['decimal', 'RunningTime'], 0);

  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => {
      setSeconds(seconds + 1);
    }, 1000);
    return () => {
      clearTimeout(t);
    };
  }, [seconds]);

  useEffect(() => {
    dispatch({ type: actionTypes.fetchDecimal, params: { ChainId: '' } });
  }, [dispatch]);

  const [search, setSearch] = useState('');
  const searchHandle = () => {
    history.push(search ? `/blockchainlist?chainid=${encodeURIComponent(search)}` : '/blockchainlist');
  };

  return (
    <Content>
      <Content.Body style={{ padding: '0px', paddingBottom: '25px' }}>
        <div
          style={{
            position: 'absolute',
            zIndex: 0,
            left: '0px',
            right: '0px',
            top: '0px',
            height: '540px',
            backgroundColor: '#072E67',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <img src={earth} alt="地球" style={{ width: '465px' }}></img>
        </div>
        <div
          style={{
            padding: '0px',
            width: '999px',
            backgroundColor: 'transparent',
            margin: '0px auto',
            position: 'relative',
            zIndex: 10,
            marginTop: '140px',
          }}
        >
          <h4
            style={{
              fontSize: '30px',
              fontFamily: 'Microsoft YaHei',
              fontWeight: 'bold',
              color: '#FFFFFF',
              letterSpacing: '10px',
              opacity: '1',
              textAlign: 'center',
            }}
          >
            区块链浏览器
          </h4>
          <div style={{ width: '500px', margin: '0px auto', position: 'relative', marginTop: '63px' }}>
            <Input
              value={search}
              onChange={(value) => {
                setSearch(value);
              }}
              placeholder="输入区块链ID"
              style={{
                width: '100%',
                height: '38px',
                borderRadius: '19px',
              }}
            />
            <Button
              type="primary"
              style={{
                width: '69px',
                height: '32px',
                backgroundColor: '#007CFF',
                borderRadius: '19px',
                position: 'absolute',
                top: '3px',
                right: '3px',
              }}
              onClick={searchHandle}
            >
              查 询
            </Button>
          </div>
          <div style={{ marginTop: '132px', display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <DataCard
                title="今日总交易数"
                amount={numToFormat(homeStore.decimal.TransactionNum)}
                imgsrc={tradeCount}
              ></DataCard>
              <DataCard
                title="运行天数"
                amount={computeDay(runningTime ? runningTime + seconds : runningTime)}
                imgsrc={RunDate}
                amountStyle={{ fontSize: '18px' }}
              ></DataCard>
            </div>
            <div>
              <DataCard
                title="业务链数"
                amount={numToFormat(homeStore.decimal.ChainNum)}
                imgsrc={ChildrenChain}
              ></DataCard>
              <DataCard title="节点数" amount={numToFormat(homeStore.decimal.NodeNum)} imgsrc={NodeCount}></DataCard>
            </div>
            <TransactionStatistics areaheight={166 - 29} height={166} width={389}></TransactionStatistics>
          </div>
          <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>
            <ContractList></ContractList>
            <ChainList></ChainList>
          </div>
          <NewestBlockInfo title1="本区块链哈希" title2="上一区块链哈希"></NewestBlockInfo>
        </div>
      </Content.Body>
    </Content>
  );
}
